<template>
  <!-- nb24小时实时数据 -->
  <div class="FlNbTimeData">
    <button class="leftTreetitleButton" @click="treeShowOrClose = true" v-if="!treeShowOrClose">
      <i class="el-icon-caret-right"></i>
    </button>
    <div class="leftTree" v-if="treeShowOrClose">
      <!-- 树形图 -->
      <!-- <leftTree></leftTree> -->
      <waterMeterLeftTree class="waterMeterLeftTree" @clickClose="clickClose" @areaIf="areaIf" />
    </div>
    <div :class="[
                { rightcontant: treeShowOrClose },
                { rightcontant2: !treeShowOrClose },
            ]">
      <!-- 搜索框-->
      <div style="padding: 0px 0px">
        <!-- <div style="font-weight:700;padding:10px 10px 10px 50px;">nb24小时实时数据</div> -->
        <!-- <div style="border-top:1px solid #E6E6E6;margin:0px 20px;"></div> -->
        <searchComponentsCss :searchData="searchData" :optionsZi="optionsZi" :searchOptionTable="searchOptionTable" :shrinkBoxOpenClose="shrinkBoxOpenClose" @searchCallBack="searchCallBack"></searchComponentsCss>
        <!-- 收缩框 -->
        <!-- {{numSearch}} -->
        <div class="shrinkBox" @click="shrinkBoxOpenClose = !shrinkBoxOpenClose">
          <i :class="
                            shrinkBoxOpenClose
                                ? 'el-icon-arrow-up'
                                : 'el-icon-arrow-down'
                        " v-if="numSearch > 8"></i>
        </div>
        <!--<el-button
          class="rightButton"
          type="primary"
          size="mini"
          @click="sunS_F"
          plain
        >搜索</el-button>
         @clearSearch='clearSearch' -->
        <div style="border-top: 1px solid #e6e6e6; margin: 0 30px"></div>
        <div class="right_row" style="padding: 25px 30px">
          <!--添加和批量删除组件-->
          <!-- <buttonhurdle
                  class="buttonhurdle"
                  :diaDataAdd="searchData"
                  :optionsZi="optionsZi"
                  :searchOptionTable="searchOptionTable"
                  @toAdd="toAdd"
                  @toDelete="toDelete"
          ></buttonhurdle> -->
          <!-- 模板导入导出下载 -->
          <!-- <importXlsx
                  class="importX"
                  :importUrl='importUrl'
                  :suoS='suoS'
                  :multipleSelection='multipleSelection'
          /> -->
          <exportXlsxOne class="importX" :importUrl="importUrl" :suoS="suoS" :multipleSelection="multipleSelection" :oDisabled="oDisabled" />
          <rightButtons style="float: right; padding: 10px" @sunS_F="sunS_F" @emptySearch="emptySearch" @configuration="configuration" class="rightButtons"></rightButtons>
        </div>
      </div>
      <!-- 表格 -->
      <div class="out">
        <!--数据列表-->
        <!-- 字典 -->
        <dictionaries :searchData="searchData" :modelType="modelType" @optionData="dictionariesCallBack"></dictionaries>
        <el-table ref="multipleTable" :data="dataAttribute" v-loading.body="loading" border fit max-height="511px" highlight-current-row size="mini" :cell-style="{ padding: '5px 0' }" @selection-change="handleSelectionChange" @row-click="clickTableRow">
          <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="45"></el-table-column>
          <el-table-column align="center" label="序号" :index="indexMethod" type="index" width="54px"></el-table-column>
          <el-table-column align="center" v-for="item in searchData" v-if="item.tableSign" :key="item.id" :label="item.CN" :show-overflow-tooltip="true" min-width="140px">
            <!-- :fixed="item.EN == 'contacts'" -->
            <template slot-scope="scope">{{
                            item.type === "select"
                                ? optionDatas(
                                      item.typeGroupCode
                                          ? optionsZi[item.EN]
                                          : searchOptionTable[item.EN],
                                      scope.row[item.EN]
                                  )
                                : scope.row[item.EN]
                        }}</template>
          </el-table-column>
          <!-- <el-table-column align="center" label="操作" width="280px" fixed="right">
            <template slot-scope="scope" class="do"> -->
          <!-- 查看按钮 -->
          <!-- <el-button
                      style="color:#0B9AC3;border:none;"
                      icon="el-icon-view"
                      circle
                      @click="makeExaId(scope.row.id)"
              ></el-button> -->
          <!-- 修改组件 -->
          <!-- <modificationi
                      class="inline_block"
                      :attributeOrder="searchData"
                      :optionsZi="optionsZi"
                      :searchOptionTable="searchOptionTable"
                      :modData="scope.row"
                      @modifyData="modifyData"
              ></modificationi> -->
          <!-- 删除按钮 -->
          <!-- <el-button
                      style="color:#C90010;border:none;"
                      icon="el-icon-delete"
                      circle
                      @click="deleteList(scope.row.id)"
              ></el-button> -->
          <!-- </template>
          </el-table-column> -->
        </el-table>
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagetotal"></el-pagination>
      </div>
      <!-- 图标   弹窗 -->
      <el-dialog :title="echartsTitle" :visible.sync="DialogVisibleTimeData" width="1100px" :before-close="handleCloses" :show-close="true" :modal-append-to-body="false" style="text-align: left" modal>
        <flNbTimeEcharts class="flNbTimeEcharts" :echartsData="echartsData" :freeingData="freeingData" v-if="DialogVisibleTimeData"></flNbTimeEcharts>
      </el-dialog>
    </div>
    <!-- 查看组件 -->
    <examine :DialogVisibleMod="DialogVisibleExamine" :modData="examineData" :optionsZi="optionsZi" :searchOptionTable="searchOptionTable" :attributeOrder="searchData" @examineDialog="examineDialog"></examine>
  </div>
</template>
<script>
//引入组件
import {
  SearchCForL,
  searchComponents,
  searchComponentsCss,
  buttonhurdle,
  modificationi,
  examine,
  rightButtons,
  dictionaries,
  importXlsx,
  waterMeterLeftTree,
} from '@/views/components/FLPage'
import exportXlsxOne from '@/views/components/FLPage/exportXlsxOne'
import flNbTimeEcharts from './compotents/flNbTimeEcharts'
import {
  addFlNbTimeData, //增加
  deleteFlNbTimeData, //删除
  searchFlNbTimeData, //分页查询
  modifyFlNbTimeData, //修改
  getFlNbTimeData, //根据ID获取
  exprotXls, //导出xlsx数据
  downTem, //导出下载模板
} from '@/api/waterAnalysis/flNbTimeData/index'
import { getFullTime, getNowTime, sevenDaysBefore } from '@/utils'
export default {
  components: {
    buttonhurdle,
    modificationi,
    examine,
    searchComponents,
    searchComponentsCss,
    importXlsx,
    rightButtons,
    dictionaries,
    waterMeterLeftTree,
    exportXlsxOne,
    flNbTimeEcharts,
  },
  name: 'FlNbTimeData',
  data() {
    return {
      oDisabled: false,
      echartsTitle: '',
      freeingData: [],
      numSearch: 0,
      DialogVisibleTimeData: false,
      loading: false,
      // 点击的某一行-要传递的数据
      clickTableRowData: {},
      treeShowOrClose: false,
      importUrl: `/api/cb/flNbTimeData/importXls`,
      //   收缩框开关
      shrinkBoxOpenClose: false,
      //搜索框
      suoS: {},
      //   搜索组件的数据
      searchData: [
        {
          EN: 'id',
          CN: 'id',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'contacts',
          CN: '用户名',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'userCode',
          CN: '用户编号',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          // dictTable:{
          //   table:'fl_customer_info',
          //   id:'id',
          //   name:'customer_name'
          // },
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'waterNo',
          CN: '水表编号',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'setupAddress',
          CN: '安装位置',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'addresscode',
          CN: '表计地址码',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'imei',
          CN: 'IMEI',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'communityCode',
          CN: '小区code',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'building',
          CN: '楼栋',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'unit',
          CN: '单元',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'housenumber',
          CN: '门牌号',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'freeingDate',
          CN: '抄表日期',
          value: sevenDaysBefore(),
          defaultFullTime: sevenDaysBefore(),
          type: 'date',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'freeingDate1',
          CN: '抄表日期止',
          value: getNowTime(),
          defaultFullTime: getNowTime(),
          type: 'date',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: false,
          tableSign: false,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: 'lastNum',
          CN: '上期读数',
          value: '',
          type: 'date',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'readNum',
          CN: '本期读数',
          value: '',
          type: 'date',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'useCount',
          CN: '合计',
          value: '',
          type: 'date',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
      ],
      //添加弹窗的数据模型
      diaDataAdd: {
        yyqName: '',
        pqName: '',
        pqNum: '',
        BH: '',
      },
      //删除----Start--------------------------------------
      deleteDataList: [],
      //删除----End----------------------------------------

      //查看----Start--------------------------------------

      //查看的弹窗控制器
      DialogVisibleExamine: false,

      //查看的数据
      examineData: {},

      //查看----End----------------------------------------

      //表格数据
      //后端传来的数据
      dataAttribute: [],
      //表格选中
      multipleSelection: [],
      //分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0, //总条数,
      modelType: 'table',
      optionsZi: [],
      searchOptionTable: [],
      areaCode: '', //小区code
      echartsData: [],
      keyNumberEcharts: 0,
    }
  },
  computed: {
    optionDatas() {
      return function (arr, val) {
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].value == val) {
              return arr[i].label
            }
          }
        }
      }
    },
  },
  created() {
    this.loading = true
    this.forData(this.currentPage, this.pagesize, this.suoS)
  },
  methods: {
    // 搜索框
    getSSearchNum() {
      let searchData = this.searchData
      let num = 0
      for (let i = 0; i < searchData.length; i++) {
        const element = searchData[i]
        if (element.searchSign) {
          num += 1
        } else {
          num = num
        }
      }
      this.numSearch = num
    },
    handleCloses(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.DialogVisibleTimeData = false
          done()
        })
        .catch((_) => {})
    },
    // 点击当前表格的某一行
    clickTableRow(row) {
      console.log('----', row.freeingData)
      if (!row.freeingData) {
        this.$message({
          type: 'warning',
          message: '暂无水量数据',
        })
        return
      }
      this.DialogVisibleTimeData = true
      this.freeingData = row.freeingData.split(',')
      this.echartsTitle = `${this.freeingData.length}小时用水分析`
      this.echartsData = this.freeingData.map(
        (item, index) => `${index < '10' ? '0' + index : index}:00`
      )
    },
    // 左侧小区条件
    areaIf(areaCode) {
      this.areaCode = areaCode
      this.suoS.communityCode = areaCode
      this.currentPage = 1
      this.forData(this.currentPage, this.pagesize, this.suoS)
    },
    clickClose(res) {
      if (res === '点击隐藏') {
        this.treeShowOrClose = false
      }
    },
    // 配置
    configuration(msg) {
      if (msg == '配置') {
        console.log(msg)
      }
    },
    // 重置
    emptySearch(msg) {
      if (msg == '重置') {
        this.currentPage = 1
        this.suoS = {}
        this.forData(this.currentPage, this.pagesize, this.suoS)
      }
    },
    // 字典组件回调
    dictionariesCallBack([a = {}, b = {}]) {
      // 正常字典
      this.optionsZi = a
      // 跨表字典
      this.searchOptionTable = b
      this.forData(this.currentPage, this.pagesize, this.suoS)
    },
    //搜索
    sunS_F(msg) {
      if (this.suoS.freeingDate && this.suoS.freeingDate1) {
        if (
          new Date(this.suoS.freeingDate).getTime() >
          new Date(this.suoS.freeingDate1).getTime()
        ) {
          this.$message({
            type: 'warning',
            message: '本期抄表日期大于本期抄表日期止',
          })
          return
        }
      }
      this.currentPage = 1
      this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
    },
    //查询组件回调
    searchCallBack(newData) {
      let obj = {}
      for (let i = 0; i < newData.length; i++) {
        obj[newData[i].EN] = newData[i].value
      }
      this.suoS = obj
    },
    //渲染数据初始
    forData(page, size, searchData) {
      this.loading = true
      if (!searchData.freeingDate) searchData.freeingDate = sevenDaysBefore()
      if (!searchData.freeingDate1) searchData.freeingDate1 = getNowTime()
      searchFlNbTimeData(page, size, searchData)
        .then((response) => {
          this.pagetotal = response.data.total
          this.dataAttribute = response.data.list
          this.oDisabled = this.dataAttribute.length ? false : true
          this.loading = false
        })
        .catch(() => {
          this.oDisabled = this.dataAttribute.length ? false : true
        })
    },
    //添加用户--新增表单组件传来的参数
    toAdd(addData) {
      let obj = {}
      for (let i = 0; i < addData.length; i++) {
        obj[addData[i].EN] = addData[i].value
      }
      addFlNbTimeData(obj)
        .then((response) => {
          this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
          this.$message({
            message: '添加成功',
            type: 'success',
          })
        })
        .catch(() => {
          this.$message.error('添加失败')
        })
    },
    //按钮栏传递了删除命令
    toDelete(orderstring) {
      this.$confirm('确认删除？')
        .then((_) => {
          let idArr = []
          for (let i = 0; i < this.deleteDataList.length; i++) {
            idArr.push(this.deleteDataList[i].id)
          }
          if (idArr.length == 0) {
            this.$message({
              message: '请选择要删除的数据',
              type: 'warning',
            })
            return
          }
          deleteFlNbTimeData(idArr)
            .then((response) => {
              this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
              this.$message({
                message: '删除成功',
                type: 'success',
              })
            })
            .catch((error) => {
              this.$message({
                message: '删除失败',
                type: 'warning',
              })
            })
        })
        .catch((_) => {})
    },
    //单项删除
    deleteList(id) {
      let arrId = [id]
      this.$confirm('确认删除？')
        .then((_) => {
          deleteFlNbTimeData(arrId).then((response) => {
            this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
            this.$message({
              message: '删除成功',
              type: 'success',
            })
          })
          done()
        })
        .catch((_) => {})
    },
    //查看
    makeExaId(id) {
      getFlNbTimeData(id)
        .then((response) => {
          let copyDialog = true
          this.DialogVisibleExamine = copyDialog
          // console.log(response);
          this.examineData = response.data
        })
        .catch((error) => {
          alert('获取失败')
        })
    },
    //查看关闭弹窗
    examineDialog(dialogVisibleMod) {
      this.DialogVisibleExamine = false
    },

    //修改
    modifyData(value, modData) {
      if (value) {
        let id = modData.id
        modifyFlNbTimeData(id, modData)
          .then((response) => {
            this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
          })
          .catch((error) => {
            this.$message({
              message: '修改失败',
              type: 'warning',
            })
            this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
          })
      } else {
        this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
      }
    },
    //表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      //传递删除的参数
      this.deleteDataList = val
    },

    //分页
    handleSizeChange(val) {
      console.log('每页 ' + val + ' 条')
      this.pagesize = val
      this.forData(this.currentPage, val, this.suoS)
    },
    handleCurrentChange(val) {
      console.log('当前页: ' + val)
      this.currentPage = val
      this.forData(val, this.pagesize, this.suoS)
    },
    // 序号
    indexMethod(index) {
      var currentPage = this.currentPage
      var pagesize = this.pagesize
      this.$nextTick(function () {
        currentPage = this.currentPage
        pagesize = this.pagesize
      })
      return currentPage * pagesize - pagesize + 1 + index
    },
    // 下载模板请求
    exprotXlsx: exprotXls,
    downloadFile: downTem,
    //工具栏组件传来的参数
    // FTableFunction(attributeOrderCloneTwiceL) {
    //   this.attributeOrder = attributeOrderCloneTwiceL;
    // },
  },
}
</script>
<style scoped src="@/styles/allCssP.css"></style>

<style lang="scss" scoped>
.FlNbTimeData {
  display: flex;
  .shrinkBox {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    height: 25px;
    // border-bottom:1px solid #E6E6E6;
  }

  .leftTreetitleButton {
    margin-top: 10px;
    border: 0;
    height: 32px;
  }
  .leftTree {
    width: 14.2%;
    .waterMeterLeftTree {
      border: 1px soild #ccc;
    }
  }
  .rightcontant {
    display: flex;
    flex-direction: column;
    width: 85.8%;
    /deep/.el-dialog__wrapper {
      .el-dialog {
        width: 1098px !important;
        height: 500px;
      }
    }
    /deep/ .el-table--mini {
      .gutter {
        display: table-cell !important;
      }
      .el-checkbox__inner {
        width: 12px;
        height: 12px;
      }
      // 改变表头的高度  改为45px
      /deep/.el-table__header-wrapper {
        .el-table__header {
          .has-gutter {
            tr {
              th {
                padding: 5px 0 !important;
                height: 34px;
                line-height: 34px;
              }
              // .is-leaf{
              //   padding: 5px 0 !important;

              // }
            }
          }
        }
      }
      // 表头操作固定定位
      /deep/.el-table__fixed-right {
        .el-table__header {
          thead {
            tr {
              th {
                padding: 5px 0 !important;
                height: 34px;
                line-height: 34px;
                .cell {
                  // padding-bottom: 5px !important;
                  //   height: 34px;
                  //   line-height: 34px;
                }
              }
            }
          }
        }
      }
      .el-table__body-wrapper {
        .el-table__body {
          tbody {
            .el-table__row {
              height: 47px !important;
            }
          }
        }
      }
    }
    .right_row {
      display: flex;
      align-items: center;
      position: relative;
      .leftButtons {
        // width: 300px;
        padding: 0px !important;
        .meterExchangeData {
          // margin-right: 10px;
        }
      }
      .centerButtons {
        flex: 1;
      }
      .rightButtons {
        position: absolute;
        padding: 0px !important;
        right: 30px;
      }
      // .hunt_sunS_F{
      //   float: right;
      //   margin: 10px;
      // }
    }
    .rightButton {
      position: absolute;
      padding: 0px !important;
      right: 30px;
    }
    .do {
      display: flex;
    }
    .pagination {
      margin-top: 20px;
      text-align: left;
    }
  }
  .rightcontant2 {
    width: 97%;
    overflow: hidden;
    /deep/.el-dialog__wrapper {
      .el-dialog {
        width: 1098px !important;
        height: 500px;
      }
    }
    /deep/ .el-table--mini {
      .gutter {
        display: table-cell !important;
      }
      .el-checkbox__inner {
        width: 12px;
        height: 12px;
      }
      // 改变表头的高度  改为45px
      /deep/.el-table__header-wrapper {
        .el-table__header {
          .has-gutter {
            tr {
              th {
                padding: 5px 0 !important;
                height: 34px;
                line-height: 34px;
              }
            }
          }
        }
      }
      // 表头操作固定定位
      /deep/.el-table__fixed-right {
        .el-table__header {
          thead {
            tr {
              th {
                padding: 5px 0 !important;
                height: 34px;
                line-height: 34px;
                .cell {
                }
              }
            }
          }
        }
      }
      .el-table__body-wrapper {
        .el-table__header .has-gutter tr,
        .el-table__header .has-gutter th {
          padding: 0;
          height: 42px;
        }
        .el-table__body tr,
        .el-table__body td {
          padding: 0;
          height: 42px;
        }
      }
    }

    .right_row {
      display: flex;
      align-items: center;
      position: relative;

      .leftButtons {
        position: absolute;
        // width: 300px;
        padding: 0px !important;
        .meterExchangeData {
          margin-right: 10px;
        }
        // margin-left: 10px;
      }
      .centerButtons {
        flex: 1;
      }
      .rightButtons {
        position: absolute;
        padding: 0px !important;
        right: 30px;
      }
      .hunt_sunS_F {
        float: right;
        margin: 10px;
      }
    }
    .rightButton {
      position: absolute;
      padding: 0px !important;
      right: 30px;
    }
    .do {
      display: flex;
    }
    .pagination {
      margin-top: 20px;
      text-align: left;
    }
  }
}
</style>
